<template>
  <!-- 商家信息卡片 -->
  <div class="shop-card-modern">
    <div class="shop-header">
      <el-button class="back-button" @click="router.back()">
        <el-icon><ArrowLeft /></el-icon>
      </el-button>

      <div class="shop-info">
        <img :src="url+shangjia.sjtp" class="shop-logo" v-if="shangjia.sjtp">
        <div class="placeholder-logo" v-else>
          <el-icon><Shop /></el-icon>
        </div>

        <div class="shop-details">
          <h1 class="shop-name">{{shangjia.name || '商家名称'}}</h1>
          <div class="shop-meta">
            <el-tag :type="shangjia.status === '营业中' ? 'success' : 'danger'">
              {{ shangjia.status || '休息中' }}
            </el-tag>
            <span class="delivery-time">
              <el-icon><Timer /></el-icon>
              {{ shangjia.psfsj || '30' }}分钟
            </span>
          </div>
        </div>
      </div>

      <div class="header-actions">
        <el-button class="action-button" @click="pingLun(shangjia.sjid)">
          <el-icon><ChatLineSquare /></el-icon>
          评价
        </el-button>

        <el-button class="favorite-button" @click="findSc" :type="isFavorite ? 'danger' : 'default'">
          <el-icon><StarFilled v-if="isFavorite" /><Star v-else /></el-icon>
          {{ isFavorite ? '已收藏' : '收藏' }}
        </el-button>
      </div>
    </div>

    <div class="shop-address-bar">
      <el-icon><Location /></el-icon>
      <span>{{shangjia.address || '商家地址'}}</span>
    </div>
  </div>

  <!-- 菜品展示 -->
  <div class="menu-section">
    <h2 class="section-title">推荐菜品</h2>
    <div class="menu-grid">
      <div
          v-for="item in caipin"
          :key="item.cpid"
          class="menu-item"
      >
        <div class="menu-item-image">
          <img :src="url+item.cptp" :alt="item.cpmc" v-if="item.cptp">
          <div class="placeholder-image" v-else>
            <el-icon><Picture /></el-icon>
          </div>
        </div>
        <div class="menu-item-info">
          <h3 class="menu-item-name">{{ item.cpmc }}</h3>
          <p class="menu-item-description">{{ item.cpms }}</p>
          <div class="menu-item-footer">
            <span class="menu-item-price">¥{{ item.cpjg }}</span>
            <div class="quantity-control">
              <el-button
                  :disabled="getQuantity(item) === 0"
                  @click="reduce(item)"
                  circle
                  size="small"
                  icon="Minus"
              />
              <span class="quantity">{{ getQuantity(item) }}</span>
              <el-button
                  @click="add(item)"
                  circle
                  size="small"
                  icon="Plus"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 结算栏 -->
  <div class="checkout-bar-modern" @click="openCartDetail" v-if="count > 0">
    <div class="checkout-content">
      <div class="cart-summary">
        <div class="cart-icon-wrapper">
          <el-badge :value="count" type="danger" :max="99">
            <el-icon class="cart-icon"><ShoppingCart /></el-icon>
          </el-badge>
        </div>
        <div class="price-section">
          <span class="total-label">合计:</span>
          <span class="total-price">¥{{ total }}</span>
          <span class="delivery-fee" v-if="shangjia.psf > 0">另需配送费¥{{ shangjia.psf }}</span>
        </div>
      </div>
      <el-button
          type="primary"
          @click.stop="submitDD"
          class="checkout-btn"
          round
      >
        去结算
      </el-button>
    </div>
  </div>

  <!-- 购物车详情抽屉 -->
  <el-drawer
      v-model="cartDrawerVisible"
      title="购物车"
      direction="btt"
      size="60%"
      class="cart-drawer"
  >
    <div class="cart-content">
      <div class="cart-items" v-if="caipinList.length > 0">
        <div
            v-for="item in caipinList"
            :key="item.cpid"
            class="cart-item"
        >
          <div class="item-info">
            <h4 class="item-name">{{ item.cpmc }}</h4>
            <p class="item-price">¥{{ item.cpjg }}</p>
          </div>
          <div class="quantity-control">
            <el-button
                size="small"
                @click="reduce(item)"
                circle
                icon="Minus"
            />
            <span class="quantity">{{ item.cpsl }}</span>
            <el-button
                size="small"
                @click="add(item)"
                circle
                icon="Plus"
            />
          </div>
        </div>
      </div>

      <div class="empty-cart" v-else>
        <el-icon class="empty-icon"><ShoppingCart /></el-icon>
        <p>购物车为空</p>
      </div>

      <div class="cart-footer" v-if="caipinList.length > 0">
        <div class="cart-total">
          <span>总计:</span>
          <span class="total-price">¥{{ total }}</span>
        </div>
        <el-button
            type="primary"
            @click="submitDD"
            class="submit-btn"
            size="large"
        >
          去结算
        </el-button>
      </div>
    </div>
  </el-drawer>

  <!-- 订单详情对话框 -->
  <el-dialog
      v-model="dialogVisible"
      title="订单详情"
      width="700"
      class="order-dialog"
  >
    <div class="order-content">
      <el-row :gutter="10" justify="start" class="order-header">
        <el-col :span="8">
          <label>订单号: </label>
          <span>{{ddxq.ddid}}</span>
        </el-col>
        <el-col :span="8">
          <label>订单状态: </label>
          <span>{{ddxq.ddzt}}</span>
        </el-col>
        <el-col :span="8">
          <label>下单时间: </label>
          <span>{{ddxq.ddsj}}</span>
        </el-col>
      </el-row>

      <el-row justify="start">
        <el-form :model="form" label-width="auto" style="min-width: 600px">
          <div class="user-info">
            <el-form-item label="用户名">
              <span>{{userInfo.yhnc}}</span>
            </el-form-item>
            <el-form-item label="手机号">
              <span>{{ddxq.phone}}</span>
            </el-form-item>
          </div>

          <el-form-item label="地址">
            <el-select v-model="address" placeholder="请选择地址" style="width: 100%">
              <el-option
                  v-for="item in addressList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="订单备注">
            <el-input v-model="ddxq.ddbz"/>
          </el-form-item>

          <el-form-item label="菜品">
            <el-table :data="ddxq.caiPin" style="width: 100%">
              <el-table-column prop="cpmc" label="菜品名称"></el-table-column>
              <el-table-column prop="cpjg" label="价格"></el-table-column>
              <el-table-column prop="cpsl" label="数量"></el-table-column>
            </el-table>
          </el-form-item>

          <div class="order-summary">
            <div class="summary-item">
              <span>菜品小计：</span>
              <span>¥{{ calculateCaiPinTotal() }}</span>
            </div>
            <div class="summary-item">
              <span>配送费：</span>
              <span>¥{{ ddxq.psf }}</span>
            </div>
            <div class="summary-item">
              <span>打包费：</span>
              <span>¥{{ ddxq.dbf }}</span>
            </div>
            <div class="summary-item total">
              <span>合计：</span>
              <span>¥{{ ddxq.total }}</span>
            </div>
          </div>
        </el-form>
      </el-row>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="pay">
          确认支付
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 支付成功对话框 -->
  <el-dialog
      v-model="paymentSuccessVisible"
      title="支付成功"
      width="400"
      class="payment-success-dialog"
  >
    <div class="payment-success-content">
      <div class="success-icon">
        <el-icon><SuccessFilled /></el-icon>
      </div>
      <h3>支付成功！</h3>
      <p>您的订单已成功支付，商家正在为您准备美食。</p>
      <div class="order-number">
        订单号: {{ ddxq.ddid }}
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closePaymentSuccess">查看订单</el-button>
        <el-button type="primary" @click="continueShopping">继续点餐</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 评论组件 -->
  <div>
    <s-j-ping-lun-qu
        ref="pingLunQuRef"
        v-model="pingLunDialogVisible"
        v-if="pingLunDialogVisible"
    ></s-j-ping-lun-qu>
  </div>
</template>

<script setup lang="ts">
import {computed, nextTick, onMounted, ref} from 'vue'
import axios from "axios";
import router from "../../router";
import {ElMessage} from "element-plus";
import {useRoute} from "vue-router";
import SJPingLunQu from './SJPingLunQu.vue'
import {
  ArrowLeft,
  ChatLineSquare,
  Location,
  Picture,
  Shop,
  ShoppingCart,
  Star,
  StarFilled,
  SuccessFilled,
  Timer
} from '@element-plus/icons-vue'

const url = '/api/upload/';
const route = useRoute();
const sjid = ref(route.query.sjid); //商家id
const pingLunDialogVisible = ref(false)
const pingLunQuRef = ref();
const isFavorite = ref(false)
const cartDrawerVisible = ref(false) // 购物车抽屉可见性
const paymentSuccessVisible = ref(false) // 支付成功对话框可见性

// 添加新的响应式变量
const address = ref('')
const addressList = ref([])
const userInfo = ref(JSON.parse(localStorage.getItem('userInfo') || '{}'))
const caipin = ref([])
const caipinList = ref([])
const shangjia = ref({})
const dialogVisible = ref(false);
const ddxq = ref({})
const showYhDd = ref({})
const gouwuche = ref({
  yhid:'',
  sjid:'',
  cpl:'',
})
const count = ref(0)
const form = ref({})

// 添加获取菜品数量的方法
const getQuantity = (dish) => {
  const item = caipinList.value.find(item => item.cpid === dish.cpid)
  return item ? item.cpsl : 0
}

const total = computed(() => {
  let total = 0;
  caipinList.value.forEach(item => {
    total += item.cpjg * item.cpsl;
  });
  showYhDd.value.total = total;
  return total;
});

const calculateCaiPinTotal = () => {
  let t = 0;
  if (!caipinList.value) return 0;
  return caipinList.value.reduce((total, item) => {
    return t += (item.cpjg * item.cpsl);
  }, 0);
};

const getCp = async () => {
  try {
    const {data} = await axios.get(`/api/caiPin/sjid/${sjid.value}`)
    if(data.code === 200){
      caipin.value = data.data;
      caipin.value.forEach(item => {
        item.cpsl = 0
      })
    }
  } catch (error) {
    ElMessage.error('获取菜品信息失败')
  }
}

const getSj = async () => {
  try {
    const {data} = await axios.get(`/api/shangjia/id/${sjid.value}`)
    if(data.code === 200){
      shangjia.value = data.data
    }
  } catch (error) {
    ElMessage.error('获取商家信息失败')
  }
}

const selectAddress = async () => {
  try {
    const {data} = await axios.get(`/api/dizhi/byYhid/${userInfo.value.yhid}`)
    if(data.code === 200){
      data.data.forEach(item => {
        item.label = item.address
        item.value = item.address
        addressList.value.push(item)
      })
    }
  } catch (error) {
    ElMessage.error('获取地址信息失败')
  }
}

const selectGwc = async () => {
  try {
    caipinList.value = [];
    const {data} = await axios.get(`/api/gouwuche/query/${userInfo.value.yhid}/${sjid.value}`)
    if(data.code === 200){
      if (data.data && data.data.cpl && JSON.parse(data.data.cpl).length != 0) {
        caipinList.value = JSON.parse(data.data.cpl)
      }
      count.value = 0;
      for (let i = 0; i < caipinList.value.length; i++) {
        count.value += caipinList.value[i].cpsl;
      }
    }
  } catch (error) {
    ElMessage.error('获取购物车信息失败')
  }
}

const updateGwc = async () => {
  try {
    gouwuche.value.yhid = userInfo.value.yhid;
    gouwuche.value.sjid = sjid.value;
    gouwuche.value.cpl = JSON.stringify(caipinList.value);
    const {data} = await axios.put('/api/gouwuche',gouwuche.value)
    if (data.code !== 200) {
      ElMessage.error('更新购物车失败')
    }
  } catch (error) {
    ElMessage.error('更新购物车失败')
  }
}

const reduce =async (cp) => {
  const item = caipinList.value.find(item => item.cpid === cp.cpid)
  if (item && item.cpsl > 0) {
    item.cpsl--;
    count.value--;
    // 从 caipinList 中移除数量为 0 的菜品
    if (item.cpsl === 0) {
      const index = caipinList.value.findIndex(item => item.cpid === cp.cpid);
      if (index!== -1) {
        caipinList.value.splice(index, 1);
      }
    }
    await updateGwc();
  }
}

const add = async (cp) => {
  // 检查商品是否已在购物车中
  let item = caipinList.value.find(item => item.cpid === cp.cpid)
  if (!item) {
    // 如果不在购物车中，创建新项目
    item = {...cp, cpsl: 0}
    caipinList.value.push(item)
  }

  item.cpsl++;
  count.value++;
  await updateGwc()
}

// 打开购物车详情
const openCartDetail = () => {
  cartDrawerVisible.value = true;
}

const submitDD = async () => {
  try {
    // 先关闭购物车抽屉
    if (shangjia.value.status === '暂停营业') {
      ElMessage.warning('该商家休息中，无法购买')
      return
    }
    cartDrawerVisible.value = false;

    const shanghaiDate = new Date(Date.now() + 8 * 60 * 60 * 1000);
    showYhDd.value.ddsj = shanghaiDate.toISOString().slice(0, 19).replace('T', ' ');
    showYhDd.value.caiPin = caipinList.value;
    showYhDd.value.yhid = userInfo.value.yhid;
    showYhDd.value.yhnc = userInfo.value.yhnc;
    showYhDd.value.phone = userInfo.value.phone;
    showYhDd.value.sjid = shangjia.value.sjid;
    showYhDd.value.name = shangjia.value.name;
    showYhDd.value.psf = shangjia.value.psf;
    showYhDd.value.dbf = shangjia.value.dbf;
    showYhDd.value.ddzt = '未支付';
    showYhDd.value.dddz = '';
    showYhDd.value.ddbz = '无';
    showYhDd.value.total = total.value;

    const {data} = await axios.post('/api/showYhDd',showYhDd.value)
    if(data.code === 200){
      ElMessage.success('订单提交成功');
      await showddxq();
    } else {
      ElMessage.error('订单提交失败')
    }
  } catch (error) {
    ElMessage.error('订单提交失败')
  }
}

const showddxq = async () => {
  try {
    const {data} = await axios.post(`/api/showYhDd/query/${userInfo.value.yhid}/${showYhDd.value.ddsj}`)
    if(data.code === 200){
      dialogVisible.value=true;
      ddxq.value = data.data;
    }
  } catch (error) {
    ElMessage.error('获取订单详情失败')
  }
}

const findSc = async () => {
  try {
    const {data} = await axios.get(`/api/shoucang/yhid/${userInfo.value.yhid}/${sjid.value}`)
    if(data.code === 200){
      if(!data.data){
        ElMessage.success('已收藏')
        isFavorite.value = true;
      } else {
        ElMessage.success('收藏成功')
        isFavorite.value = true;
      }
    }
  } catch (error) {
    ElMessage.error('收藏操作失败')
  }
}

const pay = async () => {
  if (!address.value) {
    ElMessage.warning('请选择配送地址')
    return
  }
  if (ddxq.value.ddzt === '已支付') {
    ElMessage.warning('订单已支付，无需重复支付')
    return
  }
  if (ddxq.value.ddzt === '已取消') {
    ElMessage.warning('订单已取消，无法支付')
    return
  }
  if (userInfo.value.balance < ddxq.value.total) {
    ElMessage.warning('余额不足')
    return
  }

  const dingdan = {
    ddid:ddxq.value.ddid,
    ddzt:'已支付',
    ddbz:ddxq.value.ddbz,
    dddz:address.value
  }
  try {
    const {data} = await axios.put('/api/dingdan', dingdan)
    if(data.code === 200){
      ElMessage.success('支付成功')
      dialogVisible.value = false;
      paymentSuccessVisible.value = true; // 显示支付成功对话框
      caipinList.value = [];
      userInfo.value.balance -= ddxq.value.total;
      localStorage.setItem('userInfo', JSON.stringify(userInfo.value));
      await updateGwc();
      await updateBalance()
    } else {
      ElMessage.error('支付失败')
    }
  } catch (error) {
    ElMessage.error('支付失败')
  }
}

const updateBalance = async () => {
  const shenFen = ref({
    yhid:userInfo.value.yhid,
    balance:userInfo.value.balance
  })
  const {data} = await axios.put('/api/shenfen', shenFen.value)
  if(data.code !== 200){
    ElMessage.error("付款失败")
    return
  }
}

// 关闭支付成功对话框并查看订单
const closePaymentSuccess = () => {
  paymentSuccessVisible.value = false;
  router.push('/home/showdd');
}

// 关闭支付成功对话框并继续点餐
const continueShopping = () => {
  paymentSuccessVisible.value = false;
  window.location.reload();
}

//---------------------------------评论 弹框----------------------------
const pingLun = async (obj) => {
  pingLunDialogVisible.value = true;
  await nextTick(() => {
    if (pingLunQuRef.value) {
      pingLunQuRef.value.handlePingLunData(obj);
    }
  })
}

onMounted(() => {
  if (!sjid.value) {
    ElMessage.error('缺少商家信息')
    router.back()
    return
  }

  getCp()
  getSj()
  selectGwc()
  selectAddress()
})
</script>

<style scoped>
.shop-card-modern {
  background: linear-gradient(135deg, #FFE5B4 0%, #FFDAB9 50%, #FFE4B5 100%);
  border-radius: 16px;
  overflow: hidden;
  margin: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  color: #333;
}

.shop-header {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.back-button {
  background: rgba(255, 255, 255, 0.5);
  border: none;
  color: #333;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-button:hover {
  background: rgba(255, 255, 255, 0.7);
}

.shop-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 15px;
}

.shop-logo {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.placeholder-logo {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #333;
}

.shop-details {
  flex: 1;
}

.shop-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  color: #333;
}

.shop-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.delivery-time {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.9;
  color: #333;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.action-button, .favorite-button {
  background: rgba(255, 255, 255, 0.5);
  border: none;
  color: #333;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 20px;
  font-size: 0.9rem;
}

.action-button:hover, .favorite-button:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: translateY(-2px);
}

.shop-address-bar {
  background: rgba(255, 255, 255, 0.4);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #333;
}

.section-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 30px 20px 20px;
  color: #333;
  position: relative;
  padding-bottom: 10px;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  width: 50px;
  height: 3px;
  background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
  border-radius: 3px;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 0 20px 20px;
}

.menu-item {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.menu-item:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.menu-item-image {
  height: 180px;
  overflow: hidden;
}

.menu-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.menu-item-image:hover img {
  transform: scale(1.05);
}

.placeholder-image {
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 2rem;
}

.menu-item-info {
  padding: 15px;
}

.menu-item-name {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #333;
}

.menu-item-description {
  font-size: 0.9rem;
  color: #666;
  margin: 0 0 15px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.menu-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-item-price {
  font-size: 1.2rem;
  font-weight: 700;
  color: #e74c3c;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quantity {
  min-width: 20px;
  text-align: center;
  font-weight: 500;
}

/* 改进的结算栏样式 */
.checkout-bar-modern {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 50px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  width: calc(100% - 40px);
  max-width: 600px;
  z-index: 1000;
  padding: 15px;
  border: 1px solid #eee;
  cursor: pointer;
  transition: all 0.3s ease;
}

.checkout-bar-modern:hover {
  transform: translateX(-50%) translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.checkout-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-summary {
  display: flex;
  align-items: center;
  gap: 15px;
}

.cart-icon-wrapper {
  position: relative;
}

.cart-icon {
  font-size: 2rem;
  color: #3498db;
  background: #f1f8ff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.price-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.total-label {
  font-size: 0.9rem;
  color: #666;
}

.total-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: #e74c3c;
  margin: 2px 0;
}

.delivery-fee {
  font-size: 0.8rem;
  color: #999;
}

.checkout-btn {
  padding: 16px 32px;
  font-size: 1.1rem;
  font-weight: 600;
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
  min-width: 120px;
}

.checkout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(231, 76, 60, 0.4);
}

/* 购物车抽屉样式 */
.cart-drawer {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.cart-drawer :deep(.el-drawer__header) {
  margin-bottom: 0;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.cart-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0 0 5px 0;
  color: #333;
}

.item-price {
  margin: 0;
  color: #e74c3c;
  font-weight: 600;
}

.cart-item .quantity-control {
  gap: 15px;
}

.cart-item .quantity {
  min-width: 30px;
  text-align: center;
  font-weight: 600;
}

.empty-cart {
  text-align: center;
  padding: 50px 20px;
  color: #999;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 20px;
}

.cart-footer {
  padding: 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
}

.cart-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.cart-total .total-price {
  font-size: 1.5rem;
  margin-top: 5px;
}

.submit-btn {
  padding: 15px 30px;
  font-size: 1.1rem;
  font-weight: 600;
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(231, 76, 60, 0.4);
}

/* 订单对话框样式 */
.order-dialog :deep(.el-dialog__body) {
  padding: 20px;
}

.order-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.user-info {
  display: flex;
  gap: 30px;
}

.order-summary {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 15px;
  margin-top: 20px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 1rem;
}

.summary-item.total {
  font-size: 1.2rem;
  font-weight: 700;
  padding-top: 10px;
  border-top: 1px solid #ddd;
  margin-top: 10px;
  color: #e74c3c;
}

.dialog-footer {
  padding: 20px;
  text-align: right;
}

/* 支付成功对话框样式 */
.payment-success-dialog :deep(.el-dialog__body) {
  padding: 30px 20px;
  text-align: center;
}

.payment-success-content {
  padding: 20px;
}

.success-icon {
  font-size: 4rem;
  color: #67c23a;
  margin-bottom: 20px;
}

.payment-success-content h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #333;
}

.payment-success-content p {
  color: #666;
  margin-bottom: 20px;
}

.order-number {
  background: #f5f7fa;
  padding: 10px;
  border-radius: 8px;
  font-family: monospace;
  color: #333;
}
</style>
